<template>
  <div class="flex flex-c data-container">
    <div class="item" v-for="(item, index) of list" :key="index">
      <div class="title">
        <span>{{ item.name }}</span>
        <span v-if="item.currency">({{ item.currency }})</span>
      </div>
      <div class="bottom clearfix">
        <div class="fl num">
          <span>{{ formatVal(item) }}</span>
          <span>{{ item.isPercentage ? '%' : '' }}</span>
        </div>
        <div class="common-text fr left">{{ item.isCount ? '总计' : '平均' }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { defineComponent, ref } from 'vue'
  const props = defineProps(['list'])
  function formatVal(item: any) {
    let val = item.num || 0
    if (item.isPercentage) return val
    if (val < 100000) {
      return Number(val).toFixed(2)
    } else {
      return Number(val / 10000).toFixed(2) + '万'
    }
  }
</script>

<style lang="less" scoped>
  .data-container {
    width: 100%;
    height: 60px;
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    .item {
      width: 10%;
      height: 100%;
      padding: 5px;
      font-size: 12px;
      box-sizing: border-box;
      border-right: 1px solid #d3d3d3;
      &:nth-child(1) {
        border-left: 1px solid #d3d3d3;
      }
      .title,
      .bottom {
        margin-top: 5px;
        line-height: 20px;
        .num {
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
  }
</style>
